@import 'global.scss';

.el-divider__text{
  color: red;
}

.edit-main {
	position: absolute;
	top: var(--top);
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
  height: calc(100vh - 60px);

	.edit-zone {
		position: absolute;
		left: 200px;
		right: 0;
		top: 0;
		bottom: 0;

		.edit-page-editor {
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: var(--bottom);
		}
	}
}
.right-little-title{
	line-height: 0;
	border-top: 1px solid #A5AFBE;
	text-align: center;
	margin: 8px 16px 18px 16px;

	span{
		font-size: 12px;
		color: #43475C;
		padding: 0 14px;
		background: #fff;
	}
}
//right-page
.right-component-edit{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 300px;
	border-left: 1px solid #ddd;
	background: #fff;
	box-shadow: none;

	.open-shut-right{
		position: absolute;
		left: -20px;
		top: 0;
		color: #000;
		width: 20px;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		display: inline-block;
		text-align: left;
		font-size: 20px;
		transform: rotate(180deg);
	}
}
.right-con {
	overflow: hidden;
	h3{
		background-color: #127bff;
		padding: 12px 20px;
		color: #fff;
	}
	ul{
		padding: 0;
		li{
			margin: 16px 8px;
			color: #43475c;
			text-align: center;
			span{
				display: inline-block;
				width: 160px;
			}
		}
	}

	.el-tabs__item,
	.el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2),
	.el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2),
	.el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2),
	.el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2),
	.el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2),
	.el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2),
	.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2),
	.el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2) {
		padding: 0 24px;
		color: #43475C;
		font-size: 16px;
		background-color: #F3F5FA;
	}
	.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child,
	.el-tabs--top.el-tabs--card .el-tabs__item:last-child,
	.el-tabs--top .el-tabs--left .el-tabs__item:last-child,
	.el-tabs--top .el-tabs--right .el-tabs__item:last-child,
	.el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child,
	.el-tabs--bottom.el-tabs--card .el-tabs__item:last-child,
	.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child,
	.el-tabs--bottom .el-tabs--right .el-tabs__item:last-child {
		padding-right: 30px;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active:hover{
		background-color:var(--color-blue);
		color: #fff;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item{
		color: #43475C;
	}

	.el-slider__runway{
		width: 80%;
	}

	.select-animate{
		background-color: #FBFBFB;
		border-radius: 10px;
		padding: 0 10px;
		color: #000000;
		width: 140px;
		display: inline-block;
		line-height: 20px;
		height: 20px;
		font-size: 14px;
		border: 1px solid #fff;
		margin: 3px 10px;
	}
	.wb-icon-play-button{
		margin-left: 10px;
		font-size: 10px;
	}

	.el-input__inner {
		height: 30px;
	}
	.el-carousel__container {
		height: 150px;
	}
	.el-tabs__content {
		position: absolute;
		top: 50px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	//右侧滚动css
	.edit-handles-con {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		font-size: 14px;
		// padding: 10px 10px;
    padding-bottom: 20px;
	}
}

.text-style-group {
	margin-left: 10px;
	margin-bottom: 10px;
	.el-radio-button{
		border: none;
	}
	.el-checkbox-button__inner,
	.el-radio-button__inner {
		padding: 6px 8px;
		border: none;
	}
	.el-checkbox-button__inner i,
	.el-radio-button__inner i{
		font-size: 18px;
	}
	.el-radio-button:first-child .el-radio-button__inner,
	.el-radio-button:last-child .el-radio-button__inner{
		border-radius: 0;
		border: none;
	}
	.el-checkbox-button.is-checked .el-checkbox-button__inner{
		background-color: #127bff;
	}
}

.triangle-border-right, .triangle-border-right::after{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.triangle-border-right{
	top: 50%;
	right: -12px;
	margin-bottom: 3px;
	border-right-width: 0;
	border-left-color: #ebeef5;
	border-width: 6px;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
}
.triangle-border-right::after{
	content: " ";
	border-width: 6px;
	bottom: -6px;
	right: 1px;
	border-left-color: #fff;
	border-right-width: 0;
}

.display-phone-bg{
	background-image: url('//static.hd.xxx.com/jye/fe-web/images/phone-bg.png');
}
// ------------draggable---------------
.list-complete-enter-active {
  overflow: hidden;
  transition: all 1s;
}
.list-complete-leave-active {
  margin-top: 0px;
  overflow: hidden;
  transition: all 1s;
}
.list-complete-enter, .list-complete-leave-to {
  height: 0px;
  opacity: 0;
  padding: 0px;
  margin-top: 0px;
  overflow: hidden;
}
.drag-list{
	cursor: move;

	i{
		cursor: move;
	}
	.el-form-item{
		padding: 0;
		margin: 5px 10px;
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: center;
		.drag{
			flex:0;
			color: #A5AFBE;
		}
		.input{
			flex: auto;
		}
		.btn-close{
			flex:0;
			color: #ffffff;
			border: none;
			font-size: 12px;
		}
	}
}
// ---------left------------
//left左侧
.left-pages{
	position: relative;
	box-shadow: 0 2px 5px 0 rgba(18, 123, 255, 0.1);
	left: 0;
	top: 0;
	bottom: 0;
	width: 200px;
	// z-index: 10;

	.open-shut-left{
		position: absolute;
		right: -20px;
		top: 0;
		color: #000;
		width: 20px;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		display: inline-block;
		text-align: left;
		font-size: 20px;
	}
}
.left-page-list{
	width: 200px;

	.el-collapse-item__arrow{
    float: left;
		line-height: 28px;
		height: 28px;
	}
  .el-collapse-item__content{
		padding-top: 0;
		padding-bottom: 0;
  }
  .right{
    float: right;
    line-height: 26px;
    height: 26px;
    margin-right:0px;
	}
	.el-collapse-item__header{
		margin-top: 0;
		margin-bottom: 0;
		font-size: 12px;
		line-height: 28px;
		height: 28px;
	}
}
.page-list-con {
  position: relative;
  // transition: 0.3s height ease-in-out;
  // background: #f3f5fa;
  width: 100%;
  // height: 300px;

  .page-list-scroll {
		font-size: 12px;
		overflow-y: auto;
		overflow-x: hidden;
    // overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
		height: 100%;

    // background: #fefefe;
    // padding: 10px;

    .page-list {
      position: relative;
      padding: 10px;
      border: none;
      background: 0 0;
      overflow: hidden;
      width: 200px;
      // height: 210px;
      // background: #f3f5fa;

      .page-con {
        display: flex;
        justify-content: flex-start;
				flex-direction: row;
				flex: none;

        .page-thumbnail {
					border-radius: 2px;
					box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
					border: 4px solid transparent;

          .page-thumbnail-style {
            overflow: hidden;
						transform-origin: 0 0;
						position: relative;

						.thumbnail-mask{
							position: absolute;
							top: 0;
							left: 0;
							background-color: rgba(255, 255, 255, 0.1);
							width: inherit;
							height: inherit;
							z-index: 10;
						}
					}
				}
				.page-thumbnail.page-active {
					border: 4px solid #127bff;
					border-radius: 4px;
					border-top-left-radius: 0;
				}

        .page-number {
					position: relative;
					overflow: hidden;
					width:20px;
					height:50px;
					line-height:50px;
					// border-top-left-radius: 4px;
					// border-bottom-left-radius: 4px;

					// margin-left: -10px;

					// border-width: 0px 15px 15px;
					// border-style: none solid solid;
					// border-color: transparent transparent #127bff;
					text-align: center;
					span{
						font-size: 16px;
						color: #000;
					}
				}
				.page-number::before{
					position: absolute;
			    display: block;
			    content: '';
			    z-index: 10;
			    top: -23px;
			    left: 0;
			    background: #fff;
			    width: 10px;
			    height: 50px;
			    transform: rotateZ(60deg);
				}
				.page-number::after{
					position: absolute;
			    display: block;
			    content: '';
			    z-index: 10;
			    top: 32px;
			    left: 0;
			    background: #fff;
			    width: 20px;
			    height: 50px;
			    transform: rotateZ(-60deg);
				}
				.page-number.page-active{
					background-color: #127bff;
					span{
						color: #fff;
					}
				}
        .page-btns-con {
					// width: 30px;
        }
        .page-btns {
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-direction: column;
          padding: 0 2px;
          i {
						padding: 4px 0;
						font-size: 15px;
          }
        }
      }
      .mask {
        position: absolute;
        top: 10px;
        left: 0;
        width: 80%;
        height: inherit;
      }
    }

    .page-list.active {
      background: #0f0;
    }
  }
}
.upload-media{
  display: flex;
  flex-direction: row;

  .el-upload__tip{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }

  .el-upload-list{
    .el-upload-list__item{
      width: 100px;
    }
  }
}


// -------------right--------------
.right-timelime{
	z-index: 1002;
}
.edit-zone textarea {
	border: none;
	width: 258px;
	height: 90px;
	padding: 5px;
}
.right-con textarea{
	border: 1px solid #F3F5FA;
}
.edit-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.edit-item-image,
.edit-item-textarea,
.edit-item-action,
.edit-item-color,
.edit-item-dropdown,
.edit-item-icon,
.edit-item-switch,
.edit-item-input,
.edit-item-input-tooltip {
  padding-right: var(--padding-16);

  .el-form-item__content {
    display: flex;
    align-items: center;
		flex: 1;
    .el-color-picker__trigger {
      width: 84px;
		}
		.el-switch{
			float: right;
		}
		.el-input{
			input.el-input__inner{
				padding-left:  6px;
				padding-right: 0;
			}
			span.el-input__prefix{
				left: initial;
				right: 5px;

				i{
					font-style: normal;
				}
			}
		}
	}
}

.dropdown-popver{
  .el-select-dropdown__item{
    height: auto;
    padding: 10px 14px;
  }
  .el-select-dropdown__wrap{
    max-height: 350px;
  }
}
.popover-content{
	padding-bottom: 10px;
	.popover-uiImg{
		width: 60%;
		object-fit: contain;
		display: inline-block;
		vertical-align: bottom;
	}
	.popover-btn{
		width: 35%;
		margin-left: 5%;
	}
}

.edit-item-switch{
	padding-right: 16px;
	.el-form-item__content{
		justify-content: flex-end;
	}
}


.edit-item-slider{
	margin-right: var(--padding-16);
	display: flex;
	flex-direction: row;

	.el-form-item__content{
		display: flex;
		align-items: center;
		flex: 1;

		.el-slider{
			float: left;
			width: 100%;
		}

		.el-slider__input{
			width: 36px;

			input{
				padding: 0;
			}
		}

		.el-slider__runway{
			margin-right: 50px;
		}
	}
}
.slider-normal, .switch-normal, .dropdown-normal, .color-normal, .input-normal, .el-form-item{
	label{
		padding: 0;
		margin-right: var(--padding-16);
		text-align: left;

		font-size: 14px;
		color: #373438;
		min-width: 56px;
	}
}
.el-collapse-item__content{
	.input-normal label{
		min-width: 28px;
	}
}
.dropdown-normal{
	.el-select{
		flex: 1;
	}
	button.el-button{
		width: 37px;
		height: 30px;
		margin: 0 !important;
		padding: 0;
	}
	input{
		display: inline-block;
		font-weight: bold;
	}
}
.el-radio-group {
  display: inline-block;
}
.el-form-item .el-radio-group label{
	min-width: 20px;
	i{
		font-size: 14px;
	}
}

.edit-item-input-tooltip{
	.input-normal{
		label{
			margin-left: var(--padding-16);
			margin-right: var(--padding-16);
		}
	}
	label {
		margin-right: 2px;
	}
}
.edit-item-icon{
	.el-radio-group label {
		margin-right: 0;
	}
}

.page-confirm-con{
  .orange-color{
    color:#f8633b;
	}

  .el-dialog__body{
    padding: 10px 20px;

  }
  .el-button{
    width: 100px;
    height: 34px;
    border-radius: 2px;
    background-color: #127bff;
    border: none;
    padding: 0;
  }
  .el-button--info{
    width: 100px;
    height: 34px;
    border-radius: 2px;
    background-color: #e4e7eb;
  }
  .el-dialog__headerbtn .el-dialog__close{
    color: #43475c;
    font-size: 16px;
	}
	.orange-bg-color{
    background-color:#f8633b;
	}
	.el-button--warning{
    background-color: #f8633b;
  }
}

.right-position, .vote-position{
  .el-collapse-item__content{
    padding-right: var(--padding-16);
  }
  .edit-item-input{
    padding-right: 0;
  }
  .input-normal label{
    min-width: 28px;
  }
}
.vote-position{
	padding-right: var(--padding-16);
}
.right-timer {
  .timer-con{
    .el-form-item label{
      margin-right: 0;
    }
  }
}
.right-msg, .right-lottery{
  .lists{
    margin: 0 16px;
    li{
      margin: 8px auto;
    }
  }
}
.pops-container-con{
	width: 748px;
	height: 1168px;
	background-color: rgba(0,0,0,0.6);
	filter: alpha(opacity=60);
  z-index: 100;
  position: relative;
}
.isHidePop{
	display: none;
}
.border-top-1px:before, .border-right-1px:after, .border-bottom-1px:after, .border-left-1px:before{
	border: none;
}
.jy-icon-arrow{
	font-size: 12px;
	margin-left: 3px;
}

.add-push-item {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
	align-items: left;

  .pics{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
		margin: 0;

    li{
      flex: none;
      width: 80px;
      height: 80px;
      border: 1px dashed #a5afbe;
      margin: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .loading-con{
        width: inherit;
        height: inherit;
      }
      p{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        padding:0;
        color: #fff;
      }
      .btn-delete{
        position: absolute;
        top: 0;
        right: 0;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
	}
	.input-pics{
		padding: 0;
		li{
			padding: 0;
			margin: 0;
		}
	}
}

.add-img-con {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 266px;
  height: 180px;
  border: 1px dashed #dcdfe6;
  .img-con{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .btns-con{
    position: absolute;
    top: 0;
    right: 0;
    .btn-delete, .btn-crop{
      margin-left: 1px;
      border-radius: 0;
    }
  }
  .info{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    padding: 4px;
  }
}

.lottery-img-info{
	width: 100%;
	object-fit: contain;
}
